﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公司介绍 - 模切材料小管家</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            /* TDesign 工业品色彩系统 */
            --primary-color: #0052d9;
            --primary-light: #266fe8;
            --primary-dark: #003cab;
            --secondary-color: #f2f3ff;
            --accent-color: #e37318;
            --success-color: #00a870;
            --warning-color: #ed7b2f;
            --error-color: #d54941;
            
            /* 背景色系 */
            --bg-color-page: #f5f7fa;
            --bg-color-container: #ffffff;
            --bg-color-secondray: #f8f9fc;
            
            /* 边框和分割线 */
            --border-color: #e7e7e7;
            --border-color-light: #f0f0f0;
            --border-radius-small: 3px;
            --border-radius-medium: 6px;
            --border-radius-large: 9px;
            
            /* 文字色彩 */
            --text-primary: #1a1a1a;
            --text-secondary: #4e5969;
            --text-placeholder: #86909c;
            --text-disabled: #c9cdd4;
            
            /* 阴影系统 */
            --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-2: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
            --shadow-3: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
            
            /* 间距系统 */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --space-10: 40px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: var(--bg-color-page);
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.5;
            padding-bottom: 64px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .container {
            max-width: 480px;
            margin: 0 auto;
            background: var(--bg-color-container);
            min-height: 100vh;
            box-shadow: var(--shadow-1);
            position: relative;
            overflow-x: hidden;
        }
        
        /* 头部样式 - TDesign 简约风格 */
        .header {
            background: var(--primary-color);
            color: white;
            padding: var(--space-4) var(--space-4) var(--space-5);
            position: relative;
            z-index: 10;
        }
        
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-4);
        }
        
        .back-btn {
            font-size: 18px;
            cursor: pointer;
            opacity: 0.9;
            transition: opacity 0.2s ease;
        }
        
        .back-btn:hover {
            opacity: 1;
        }
        
        .page-title {
            font-weight: 500;
            font-size: 16px;
        }
        
        .actions {
            display: flex;
            gap: var(--space-5);
        }
        
        .actions i {
            font-size: 16px;
            cursor: pointer;
            opacity: 0.9;
            transition: opacity 0.2s ease;
        }
        
        .actions i:hover {
            opacity: 1;
        }
        
        /* 主要内容区域 */
        .main-content {
            padding: var(--space-4);
        }
        
        /* 公司基本信息 */
        .company-header {
            background: var(--bg-color-container);
            border-radius: var(--border-radius-medium);
            padding: var(--space-4);
            margin-bottom: var(--space-4);
            box-shadow: var(--shadow-1);
            border: 1px solid var(--border-color-light);
        }
        
        .company-logo-section {
            display: flex;
            align-items: center;
            margin-bottom: var(--space-4);
        }
        
        .company-logo {
            width: 60px;
            height: 60px;
            background: var(--secondary-color);
            border-radius: var(--border-radius-medium);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            font-size: 24px;
            font-weight: 600;
            margin-right: var(--space-3);
        }
        
        .company-basic-info {
            flex: 1;
        }
        
        .company-name {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--space-2);
        }
        
        .company-attributes {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }
        
        .attribute-tag {
            background: var(--bg-color-secondray);
            color: var(--text-secondary);
            padding: var(--space-1) var(--space-2);
            border-radius: var(--border-radius-small);
            font-size: 11px;
            border: 1px solid var(--border-color-light);
        }
        
        /* 企业类别标签 */
        .enterprise-categories {
            margin-top: var(--space-2);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-2);
        }
        
        .category-label {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .category-tag {
            background: var(--primary-color);
            color: white;
            padding: var(--space-1) var(--space-2);
            border-radius: var(--border-radius-small);
            font-size: 11px;
            font-weight: 500;
        }
        
        .favorite-btn {
            background: none;
            border: none;
            color: var(--text-placeholder);
            font-size: 18px;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .favorite-btn.active {
            color: var(--error-color);
        }
        
        /* 筛选栏样式 */
        .filter-bar {
            background: var(--bg-color-container);
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--border-color-light);
            display: flex;
            gap: var(--space-2);
            align-items: center;
        }
        
        .filter-item {
            padding: var(--space-1) var(--space-3);
            border-radius: var(--border-radius-small);
            font-size: 12px;
            background: var(--bg-color-secondray);
            color: var(--text-secondary);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
            border: 1px solid var(--border-color-light);
        }
        
        .filter-item:hover {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .filter-item.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .city-filter-btn {
            background: white;
            color: var(--text-secondary);
            border: 1px solid var(--border-color-light);
            padding: var(--space-2) var(--space-4);
            border-radius: var(--border-radius-small);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }
        
        .city-filter-btn:hover {
            background: var(--bg-color-secondray);
        }
        
        .city-filter-btn.filtered {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .city-filter-btn.filtered:hover {
            background: var(--primary-dark);
        }
        
        .city-filter-btn i {
            font-size: 10px;
        }
        
        .filter-spacer {
            flex: 1;
        }
        
        .category-filter-btn {
            background: white;
            color: var(--text-secondary);
            border: 1px solid var(--border-color-light);
            padding: var(--space-2) var(--space-4);
            border-radius: var(--border-radius-small);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }
        
        .category-filter-btn:hover {
            background: var(--bg-color-secondray);
        }
        
        .category-filter-btn.filtered {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .category-filter-btn.filtered:hover {
            background: var(--primary-dark);
        }
        
        .category-filter-btn i {
            font-size: 10px;
        }
        
        .reset-btn {
            background: var(--bg-color-secondray);
            color: var(--text-secondary);
            border: 1px solid var(--border-color-light);
            padding: var(--space-2) var(--space-3);
            border-radius: var(--border-radius-small);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }
        
        .reset-btn:hover {
            background: var(--border-color-light);
        }
        
        .reset-btn i {
            font-size: 10px;
        }
        
        /* 公司元信息样式 */
        .company-meta {
            margin-top: var(--space-2);
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
        }
        
        .publish-time,
        .company-location {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: var(--text-placeholder);
        }
        
        .publish-time i,
        .company-location i {
            margin-right: var(--space-1);
            font-size: 10px;
        }
        
        /* 城市选择弹窗 */
        .city-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
            align-items: flex-end;
        }
        
        .city-modal.show {
            display: flex;
        }
        
        .city-modal-content {
            background: var(--bg-color-container);
            width: 100%;
            max-height: 60vh;
            border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
            padding: var(--space-4);
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .city-modal.show .city-modal-content {
            transform: translateY(0);
        }
        
        .city-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-4);
            padding-bottom: var(--space-2);
            border-bottom: 1px solid var(--border-color-light);
        }
        
        .city-modal-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .city-modal-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-placeholder);
            cursor: pointer;
        }
        
        .city-levels {
            display: flex;
            gap: var(--space-2);
            margin-bottom: var(--space-4);
        }
        
        .city-level {
            flex: 1;
            padding: var(--space-2);
            border: 1px solid var(--border-color-light);
            border-radius: var(--border-radius-small);
            background: var(--bg-color-secondray);
            text-align: center;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .city-level.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .city-list {
            max-height: 200px;
            overflow-y: auto;
        }
        
        .city-item {
            padding: var(--space-3);
            border-bottom: 1px solid var(--border-color-light);
            cursor: pointer;
            transition: background 0.2s ease;
        }
        
        .city-item:hover {
            background: var(--bg-color-secondray);
        }
        
        .city-item:last-child {
            border-bottom: none;
        }
        
        .city-item.active {
            background: var(--secondary-color);
            color: var(--primary-color);
        }
        
        /* 分类筛选弹窗 */
        .category-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
            align-items: flex-end;
        }
        
        .category-modal.show {
            display: flex;
        }
        
        .category-modal-content {
            background: var(--bg-color-container);
            width: 100%;
            max-height: 70vh;
            border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
            padding: var(--space-4);
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .category-modal.show .category-modal-content {
            transform: translateY(0);
        }
        
        .category-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-4);
            padding-bottom: var(--space-2);
            border-bottom: 1px solid var(--border-color-light);
        }
        
        .category-modal-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .category-modal-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-placeholder);
            cursor: pointer;
        }
        
        .category-levels {
            display: flex;
            gap: var(--space-2);
            margin-bottom: var(--space-4);
        }
        
        .category-level {
            flex: 1;
            padding: var(--space-2);
            border: 1px solid var(--border-color-light);
            border-radius: var(--border-radius-small);
            background: var(--bg-color-secondray);
            text-align: center;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .category-level.active {
            background: var(--accent-color);
            color: white;
            border-color: var(--accent-color);
        }
        
        .category-list {
            max-height: 250px;
            overflow-y: auto;
        }
        
        .category-item {
            padding: var(--space-3);
            border-bottom: 1px solid var(--border-color-light);
            cursor: pointer;
            transition: background 0.2s ease;
        }
        
        .category-item:hover {
            background: var(--bg-color-secondray);
        }
        
        .category-item:last-child {
            border-bottom: none;
        }
        
        .category-item.active {
            background: var(--secondary-color);
            color: var(--accent-color);
        }
        
        .modal-buttons {
            display: flex;
            gap: var(--space-2);
            margin-top: var(--space-4);
            padding-top: var(--space-4);
            border-top: 1px solid var(--border-color-light);
        }
        
        .modal-btn {
            flex: 1;
            padding: var(--space-3);
            border: none;
            border-radius: var(--border-radius-medium);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .modal-btn-cancel {
            background: var(--bg-color-secondray);
            color: var(--text-secondary);
        }
        
        .modal-btn-cancel:hover {
            background: var(--border-color-light);
        }
        
        .modal-btn-confirm {
            background: var(--accent-color);
            color: white;
        }
        
        .modal-btn-confirm:hover {
            background: #c5611d;
        }
        
        /* 业务对接人 */
        .contact-person {
            background: var(--bg-color-container);
            border-radius: var(--border-radius-medium);
            padding: var(--space-3);
            margin-bottom: var(--space-4);
            box-shadow: var(--shadow-1);
            border: 1px solid var(--border-color-light);
        }
        
        .contact-person-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: var(--space-3);
        }
        
        .contact-card {
            display: flex;
            align-items: center;
            background: var(--bg-color-secondray);
            border-radius: var(--border-radius-medium);
            padding: var(--space-3);
        }
        
        .contact-avatar {
            width: 40px;
            height: 40px;
            background: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            margin-right: var(--space-3);
        }
        
        .contact-info {
            flex: 1;
        }
        
        .contact-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: var(--space-1);
        }
        
        .contact-title {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .contact-phone {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            color: var(--primary-color);
            font-size: 14px;
            font-weight: 500;
            background: var(--secondary-color);
            padding: var(--space-2) var(--space-3);
            border-radius: var(--border-radius-medium);
            border: 1px solid var(--primary-light);
        }
        
        .contact-phone i {
            font-size: 12px;
        }
        
        
        /* 公司介绍 */
        .company-intro {
            background: var(--bg-color-container);
            border-radius: var(--border-radius-medium);
            padding: var(--space-4);
            margin-bottom: var(--space-4);
            box-shadow: var(--shadow-1);
            border: 1px solid var(--border-color-light);
        }
        
        .company-intro-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: var(--space-3);
        }
        
        .company-intro-content {
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1.6;
        }
        
        /* 公司照片 */
        .company-photos {
            margin-top: var(--space-4);
        }
        .company-photos-title {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: var(--space-2);
        }
        .photo-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-3);
        }
        .photo-item {
            width: 100%;
            aspect-ratio: 1 / 1;
            background: var(--bg-color-secondray);
            border: 1px solid var(--border-color-light);
            border-radius: var(--border-radius-medium);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-placeholder);
            font-size: 24px;
            position: relative;
            cursor: pointer;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            overflow: hidden;
        }
        .photo-item:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-2);
        }
        .photo-watermark {
            position: absolute;
            bottom: 4px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 2px;
            font-weight: 500;
        }
        
        /* 公司地址 */
        .company-address {
            background: var(--bg-color-container);
            border-radius: var(--border-radius-medium);
            padding: var(--space-4);
            margin-bottom: var(--space-4);
            box-shadow: var(--shadow-1);
            border: 1px solid var(--border-color-light);
        }
        
        .company-address-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: var(--space-3);
        }
        
        .company-address-content {
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1.6;
        }
        
        /* 资质文件 */
        .qualification-files {
            background: var(--bg-color-container);
            border-radius: var(--border-radius-medium);
            padding: var(--space-4);
            margin-bottom: var(--space-4);
            box-shadow: var(--shadow-1);
            border: 1px solid var(--border-color-light);
        }
        
        .qualification-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: var(--space-3);
        }
        
        .file-thumbnails {
            display: flex;
            gap: var(--space-3);
            flex-wrap: wrap;
        }
        
        .thumbnail-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .thumbnail-item:hover {
            transform: translateY(-2px);
        }
        
        .thumbnail-image {
            width: 80px;
            height: 100px;
            background: var(--bg-color-secondray);
            border-radius: var(--border-radius-medium);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-placeholder);
            font-size: 24px;
            margin-bottom: var(--space-2);
            border: 1px solid var(--border-color-light);
            position: relative;
            overflow: hidden;
        }
        
        .thumbnail-image:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-2);
        }
        
        .watermark {
            position: absolute;
            bottom: 4px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 2px;
            font-weight: 500;
        }
        
        .thumbnail-name {
            font-size: 12px;
            color: var(--text-secondary);
            text-align: center;
            line-height: 1.3;
        }
        
        /* 底部标签页 */
        .bottom-tabs {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-color-container);
            border-top: 1px solid var(--border-color);
            display: flex;
            z-index: 100;
            max-width: 480px;
            margin: 0 auto;
            height: 64px;
        }
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: color 0.2s ease;
            color: var(--text-placeholder);
            position: relative;
        }
        
        .tab-item.active {
            color: var(--primary-color);
        }
        
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 2px;
            background: var(--error-color);
        }
        
        .tab-item i {
            font-size: 18px;
            margin-bottom: var(--space-1);
        }
        
        .tab-item span {
            font-size: 10px;
        }
        
        .tab-badge {
            position: absolute;
            top: 8px;
            right: 20px;
            background: var(--error-color);
            color: white;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
        }
        
        /* 产品列表弹窗 */
        .product-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-color-container);
            z-index: 1000;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
        }
        
        .product-modal.show {
            transform: translateY(0);
        }
        
        .modal-header {
            padding: var(--space-4);
            border-bottom: 1px solid var(--border-color-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-placeholder);
            cursor: pointer;
        }
        
        .modal-content {
            flex: 1;
            overflow-y: auto;
            padding: var(--space-4);
        }
        
        .search-bar {
            background: var(--bg-color-secondray);
            border: 1px solid var(--border-color-light);
            border-radius: var(--border-radius-medium);
            padding: var(--space-2) var(--space-3);
            display: flex;
            align-items: center;
            margin-bottom: var(--space-4);
        }
        
        .search-bar i {
            margin-right: var(--space-2);
            color: var(--text-placeholder);
            font-size: 14px;
        }
        
        .search-bar input {
            background: transparent;
            border: none;
            color: var(--text-primary);
            width: 100%;
            font-size: 14px;
            outline: none;
        }
        
        .search-bar input::placeholder {
            color: var(--text-placeholder);
        }
        
        .product-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }
        
        .product-item {
            background: var(--bg-color-container);
            border-radius: var(--border-radius-medium);
            padding: var(--space-3);
            box-shadow: var(--shadow-1);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
            border: 1px solid var(--border-color-light);
            position: relative;
            overflow: hidden;
        }
        
        .product-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: var(--primary-color);
            border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
        }
        
        .product-item:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-2);
        }
        
        .product-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: var(--space-2);
        }
        
        .product-title {
            font-weight: 500;
            font-size: 14px;
            color: var(--text-primary);
            flex: 1;
            margin-right: var(--space-2);
        }
        
        .product-type {
            color: white;
            font-size: 10px;
            padding: var(--space-1) var(--space-2);
            border-radius: var(--border-radius-small);
            flex-shrink: 0;
            background: var(--primary-color);
        }
        
        .product-desc {
            color: var(--text-secondary);
            font-size: 12px;
            margin-bottom: var(--space-2);
            line-height: 1.4;
        }
        
        .product-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-placeholder);
            font-size: 11px;
        }
        
        .product-company {
            display: flex;
            align-items: center;
        }
        
        .product-company i {
            margin-right: var(--space-1);
            color: var(--primary-color);
            font-size: 10px;
        }
        
        .location-info {
            display: flex;
            align-items: center;
        }
        
        .location-info i {
            margin-right: var(--space-1);
            color: var(--text-placeholder);
            font-size: 10px;
        }
        
        /* 位置和日期行样式 - 参考加工一览 */
        .location-date-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-2) var(--space-3);
            background: var(--bg-color-secondray);
            border-radius: var(--border-radius-small);
            margin-top: var(--space-2);
            border: 1px solid var(--border-color-light);
        }
        
        .location-info {
            display: flex;
            align-items: center;
            color: var(--text-secondary);
            font-size: 12px;
        }
        
        .location-info i {
            color: var(--text-placeholder);
            margin-right: var(--space-1);
            font-size: 10px;
        }
        
        .date-info {
            color: var(--text-placeholder);
            font-size: 11px;
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: var(--space-10) var(--space-5);
            color: var(--text-placeholder);
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: var(--space-4);
            color: var(--border-color);
        }
        
        .empty-state h3 {
            font-size: 14px;
            margin-bottom: var(--space-2);
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .empty-state p {
            font-size: 12px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部区域 -->
        <div class="header">
            <div class="top-bar">
                <div class="back-btn" onclick="history.back()">
                    <i class="fas fa-arrow-left"></i>
                </div>
                <div class="page-title">企业详情</div>
                <div class="actions">
                    <i class="fas fa-ellipsis-v"></i>
                    <i class="fas fa-bullseye"></i>
                </div>
            </div>
        </div>
        

        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 公司基本信息 -->
            <div class="company-header">
                <div class="company-logo-section">
                    <div class="company-basic-info">
                        <div class="company-name">东莞市意胜包装材料有限公司</div>
                        <div class="company-attributes">
                            <span class="attribute-tag">0-20人</span>
                            <span class="attribute-tag">未融资</span>
                            <span class="attribute-tag">民营</span>
                        </div>
                        <div class="enterprise-categories">
                            <span class="category-label">企业类别：</span>
                            <span class="category-tag">单面胶带</span>
                            <span class="category-tag">精密模切</span>
                        </div>
                        <div class="company-meta">
                            <div class="publish-time">
                                <i class="fas fa-clock"></i>
                                <span>发布时间: 2024-01-15</span>
                            </div>
                            <div class="company-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>广东省东莞市常平镇兴联兴科技园</span>
                            </div>
                        </div>
                    </div>
                    <button class="favorite-btn" onclick="toggleFavorite()">
                        <i class="far fa-star"></i>
                    </button>
                </div>
            </div>
            
            <!-- 业务对接人 -->
            <div class="contact-person">
                <div class="contact-person-title">业务对接人</div>
                <div class="contact-card">
                    <div class="contact-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="contact-info">
                        <div class="contact-name">罗通文</div>
                        <div class="contact-title">业务经理</div>
                    </div>
                    <div class="contact-phone">
                        <i class="fas fa-phone"></i>
                        <span>13800138000</span>
                    </div>
                </div>
            </div>
            
            
            <!-- 公司介绍 -->
            <div class="company-intro">
                <div class="company-intro-title">公司介绍</div>
                <div class="company-intro-content">
                    本公司专业坐产各类PE、PET、OPP、PVC等,静电膜,带胶保护膜! 拥有先进的生产设备和专业的技术团队，致力于为客户提供高品质的包装材料解决方案。公司成立于2010年，经过多年的发展，已成为行业内知名的包装材料供应商。
                </div>
                <div class="company-photos">
                    <div class="company-photos-title">公司照片（最多3张）</div>
                    <div class="photo-grid">
                        <div class="photo-item" onclick="viewPhoto(1)">
                            <i class="fas fa-image"></i>
                            <div class="photo-watermark">预览</div>
                        </div>
                        <div class="photo-item" onclick="viewPhoto(2)">
                            <i class="fas fa-image"></i>
                            <div class="photo-watermark">预览</div>
                        </div>
                        <div class="photo-item" onclick="viewPhoto(3)">
                            <i class="fas fa-image"></i>
                            <div class="photo-watermark">预览</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 公司地址 -->
            <div class="company-address">
                <div class="company-address-title">公司地址</div>
                <div class="company-address-content">
                    广东省东莞市常平镇兴联兴科技园
                </div>
            </div>
            
            <!-- 资质文件 -->
            <div class="qualification-files">
                <div class="qualification-title">资质文件</div>
                <div class="file-thumbnails">
                    <div class="thumbnail-item" onclick="viewFile('iso')">
                        <div class="thumbnail-image">
                            <i class="fas fa-file-alt"></i>
                            <div class="watermark">预览</div>
                        </div>
                        <div class="thumbnail-name">ISO9001认证证书</div>
                    </div>
                    <div class="thumbnail-item" onclick="viewFile('agent')">
                        <div class="thumbnail-image">
                            <i class="fas fa-certificate"></i>
                            <div class="watermark">预览</div>
                        </div>
                        <div class="thumbnail-name">代理授权书</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部标签页 -->
        <div class="bottom-tabs">
            <div class="tab-item active" onclick="showProducts()">
                <i class="fas fa-th-large"></i>
                <span>公司产品</span>
                <div class="tab-badge">4</div>
            </div>
        </div>
        
        <!-- 产品列表弹窗 -->
        <div class="product-modal" id="productModal">
            <div class="modal-header">
                <div class="modal-title">公司产品</div>
                <button class="modal-close" onclick="hideProducts()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-content">
                <div class="search-bar">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="请输入搜索关键词">
                </div>
                <div class="product-list" id="productList">
                    <!-- 产品列表将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
        
        <!-- 城市选择弹窗 -->
        <div class="city-modal" id="cityModal">
            <div class="city-modal-content">
                <div class="city-modal-header">
                    <div class="city-modal-title">选择城市</div>
                    <button class="city-modal-close" onclick="hideCityModal()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <div class="city-levels">
                    <div class="city-level active" data-level="province" onclick="switchCityLevel('province')">省份</div>
                    <div class="city-level" data-level="city" onclick="switchCityLevel('city')">城市</div>
                    <div class="city-level" data-level="district" onclick="switchCityLevel('district')">区县</div>
                </div>
                
                <div class="city-list" id="cityList">
                    <!-- 动态生成城市列表 -->
                </div>
            </div>
        </div>
        
        <!-- 分类筛选弹窗 -->
        <div class="category-modal" id="categoryModal">
            <div class="category-modal-content">
                <div class="category-modal-header">
                    <div class="category-modal-title">类别筛选</div>
                    <button class="category-modal-close" onclick="hideCategoryModal()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <div class="category-levels">
                    <div class="category-level active" data-level="main" onclick="switchCategoryLevel('main')">一级分类</div>
                    <div class="category-level" data-level="sub" onclick="switchCategoryLevel('sub')">二级分类</div>
                    <div class="category-level" data-level="product" onclick="switchCategoryLevel('product')">三级分类</div>
                </div>
                
                <div class="category-list" id="categoryList">
                    <!-- 动态生成分类列表 -->
                </div>
                
                <div class="modal-buttons">
                    <button class="modal-btn modal-btn-cancel" onclick="hideCategoryModal()">取消</button>
                    <button class="modal-btn modal-btn-confirm" onclick="applyCategoryFilter()">确定</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 模拟公司数据
        const companyData = {
            name: '东莞市意胜包装材料有限公司',
            logo: 'YS',
            attributes: ['0-20人', '未融资', '民营', '材料厂', '涂布厂'],
            contactPerson: {
                name: '罗通文',
                title: '业务经理',
                avatar: 'fas fa-user'
            },
            products: [
                '硅胶保护膜', '离型膜', '亚克力保护膜', '防爆膜', 'AG膜',
                'PU保护膜', 'CPP保护膜', 'PVC膜', 'pet双面胶', '泡棉胶带'
            ],
            intro: '本公司专业坐产各类PE、PET、OPP、PVC等,静电膜,带胶保护膜! 拥有先进的生产设备和专业的技术团队，致力于为客户提供高品质的包装材料解决方案。公司成立于2010年，经过多年的发展，已成为行业内知名的包装材料供应商。',
            address: '广东省东莞市常平镇兴联兴科技园',
            companyProducts: [
                {
                    name: 'OPP保护膜',
                    model: 'P5030',
                    price: '2.4元/平方米',
                    image: 'fas fa-film',
                    category: '薄膜类',
                    specs: '50mm×50m，厚度0.15mm，耐高温，粘性强',
                    publishDate: '2024-01-15'
                },
                {
                    name: 'PE静电膜',
                    model: 'YS45005',
                    price: '15元/平方米',
                    image: 'fas fa-layer-group',
                    category: '薄膜类',
                    specs: '静电吸附，无胶粘性，可重复使用',
                    publishDate: '2024-01-14'
                },
                {
                    name: 'PET离型膜',
                    model: '2503',
                    price: '9000元/吨',
                    image: 'fas fa-roll',
                    category: '离型材料',
                    specs: 'PET材质，离型力稳定，适用于胶带生产',
                    publishDate: '2024-01-13'
                },
                {
                    name: 'PE保护膜',
                    model: 'YS45005',
                    price: '1.5元/平方米',
                    image: 'fas fa-shield-alt',
                    category: '薄膜类',
                    specs: 'PE材质，透明度高，保护性能优良',
                    publishDate: '2024-01-12'
                }
            ]
        };
        
        // 切换收藏
        function toggleFavorite() {
            const favoriteBtn = document.querySelector('.favorite-btn');
            const icon = favoriteBtn.querySelector('i');
            
            if (icon.classList.contains('far')) {
                icon.classList.remove('far');
                icon.classList.add('fas');
                favoriteBtn.classList.add('active');
            } else {
                icon.classList.remove('fas');
                icon.classList.add('far');
                favoriteBtn.classList.remove('active');
            }
        }
        
        
        // 查看文件
        function viewFile(fileType) {
            const fileNames = {
                'iso': 'ISO9001认证证书',
                'agent': '代理授权书'
            };
            alert(`正在预览${fileNames[fileType]}...`);
        }
        
        // 预览公司照片
        function viewPhoto(index) {
            alert(`正在预览公司照片${index}`);
        }
        
        // 显示产品列表
        function showProducts() {
            const modal = document.getElementById('productModal');
            const productList = document.getElementById('productList');
            
            // 生成产品列表 - 使用与search-results.html相同的格式
            productList.innerHTML = companyData.companyProducts.map(product => `
                <div class="product-item" onclick="viewProduct('${product.name}')">
                    <div class="product-header">
                        <div class="product-title">${product.model}</div>
                        <div class="product-type">材料</div>
                    </div>
                    <div class="product-desc">
                        产品分类：${product.category || '胶带类'}<br>
                        产品名称：${product.name}<br>
                        规格：${product.specs || '50mm×50m，厚度0.15mm，耐高温，粘性强'}
                    </div>
                    <div class="product-meta">
                        <div class="product-company">
                            <i class="fas fa-building"></i>
                            <span>东莞市意胜包装材料有限公司</span>
                        </div>
                    </div>
                    <div class="location-date-row">
                        <div class="location-info">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>广东省东莞市</span>
                        </div>
                        <div class="date-info">${product.publishDate || '2024-01-15'}</div>
                    </div>
                </div>
            `).join('');
            
            modal.classList.add('show');
            
            // 更新标签页状态
            document.querySelectorAll('.tab-item').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelector('.tab-item').classList.add('active');
        }
        
        // 隐藏产品列表
        function hideProducts() {
            const modal = document.getElementById('productModal');
            modal.classList.remove('show');
        }
        
        // 查看产品详情
        function viewProduct(productName) {
            alert(`查看产品详情: ${productName}`);
        }
        
        
        // 搜索产品
        document.querySelector('.search-bar input').addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            const productItems = document.querySelectorAll('.product-item');
            
            productItems.forEach(item => {
                const productName = item.querySelector('.product-name').textContent.toLowerCase();
                if (productName.includes(searchTerm)) {
                    item.style.display = 'flex';
                } else {
                    item.style.display = 'none';
                }
            });
        });
        
        // 点击弹窗外部关闭
        document.getElementById('productModal').addEventListener('click', function(e) {
            if (e.target === this) {
                hideProducts();
            }
        });
        
        // 城市数据
        const cityData = {
            '广东省': {
                '深圳市': ['南山区', '福田区', '罗湖区', '宝安区', '龙岗区', '盐田区', '龙华区', '坪山区', '光明区', '大鹏新区'],
                '广州市': ['天河区', '越秀区', '荔湾区', '海珠区', '白云区', '黄埔区', '番禺区', '花都区', '南沙区', '从化区', '增城区'],
                '东莞市': ['莞城街道', '南城街道', '东城街道', '万江街道', '石碣镇', '石龙镇', '茶山镇', '石排镇', '企石镇', '横沥镇'],
                '佛山市': ['禅城区', '南海区', '顺德区', '三水区', '高明区']
            },
            '江苏省': {
                '苏州市': ['姑苏区', '虎丘区', '吴中区', '相城区', '吴江区', '常熟市', '张家港市', '昆山市', '太仓市'],
                '南京市': ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区', '栖霞区', '雨花台区', '江宁区', '六合区', '溧水区', '高淳区'],
                '无锡市': ['梁溪区', '锡山区', '惠山区', '滨湖区', '新吴区', '江阴市', '宜兴市']
            },
            '浙江省': {
                '杭州市': ['上城区', '拱墅区', '西湖区', '滨江区', '萧山区', '余杭区', '临平区', '钱塘区', '富阳区', '临安区', '桐庐县', '淳安县', '建德市'],
                '宁波市': ['海曙区', '江北区', '北仑区', '镇海区', '鄞州区', '奉化区', '象山县', '宁海县', '余姚市', '慈溪市']
            },
            '北京市': {
                '北京市': ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', '密云区', '延庆区']
            },
            '上海市': {
                '上海市': ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '奉贤区', '崇明区']
            }
        };
        
        // 分类数据
        const categoryData = {
            '材料': {
                '胶带类': ['单面胶带', '双面胶带', '美纹纸胶带', '布基胶带', '泡棉胶带'],
                '薄膜类': ['PE薄膜', 'PET薄膜', 'OPP薄膜', 'PVC薄膜', '保护膜'],
                '泡棉类': ['EVA泡棉', 'PE泡棉', 'PU泡棉', '导电泡棉', '防震泡棉'],
                '离型材料': ['离型膜', '离型纸', '硅油纸', '格拉辛纸']
            },
            '加工': {
                '模切加工': ['全模切加工', '手机辅料', '包装印刷', '家居穿戴', '能源动力', '医疗卫生', '背光模切'],
                '冲压加工': ['五金冲压', '精密冲压', '连续冲压', '单冲加工'],
                '激光加工': ['激光切割', '激光打标', '激光焊接', '激光雕刻'],
                'CNC加工': ['精密加工', '数控加工', '车削加工', '铣削加工']
            },
            '散料': {
                '胶带散料': ['单面胶带散料', '双面胶带散料', '美纹纸散料', '布基胶带散料'],
                '薄膜散料': ['PE薄膜散料', 'PET薄膜散料', 'OPP薄膜散料', '保护膜散料'],
                '泡棉散料': ['EVA泡棉散料', 'PE泡棉散料', 'PU泡棉散料', '导电泡棉散料'],
                '离型散料': ['离型膜散料', '离型纸散料', '硅油纸散料']
            }
        };
        
        let currentCityLevel = 'province';
        let selectedProvince = '';
        let selectedCity = '';
        let selectedDistrict = '';
        
        let currentCategoryLevel = 'main';
        let selectedMainCategory = '';
        let selectedSubCategory = '';
        let selectedProduct = '';
        
        // 全国筛选功能
        function filterNational() {
            // 重置城市筛选
            selectedProvince = '';
            selectedCity = '';
            selectedDistrict = '';
            
            // 重置城市按钮文本和样式
            const cityBtn = document.querySelector('.city-filter-btn');
            cityBtn.innerHTML = '<i class="fas fa-map-marker-alt"></i> 城市';
            cityBtn.classList.remove('filtered');
            
            // 更新全国按钮状态 - 激活
            document.querySelectorAll('.filter-item').forEach(item => {
                item.classList.remove('active');
            });
            // 激活全国按钮
            event.target.classList.add('active');
            
            console.log('筛选全国数据');
        }
        
        // 重置所有筛选
        function resetFilters() {
            // 重置城市筛选
            selectedProvince = '';
            selectedCity = '';
            selectedDistrict = '';
            
            // 重置分类筛选
            selectedMainCategory = '';
            selectedSubCategory = '';
            selectedProduct = '';
            
            // 重置按钮状态
            const cityBtn = document.querySelector('.city-filter-btn');
            cityBtn.innerHTML = '<i class="fas fa-map-marker-alt"></i> 城市';
            cityBtn.classList.remove('filtered');
            
            const categoryBtn = document.querySelector('.category-filter-btn');
            categoryBtn.innerHTML = '<i class="fas fa-filter"></i> 分类筛选';
            categoryBtn.classList.remove('filtered');
            
            document.querySelectorAll('.filter-item').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelector('.filter-item').classList.add('active');
            
            console.log('重置所有筛选');
        }
        
        // 城市筛选相关函数
        function showCityModal() {
            document.getElementById('cityModal').classList.add('show');
            loadCityList();
        }
        
        function hideCityModal() {
            document.getElementById('cityModal').classList.remove('show');
        }
        
        function switchCityLevel(level) {
            currentCityLevel = level;
            
            // 更新级别按钮状态
            document.querySelectorAll('.city-level').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`[data-level="${level}"]`).classList.add('active');
            
            loadCityList();
        }
        
        function loadCityList() {
            const cityList = document.getElementById('cityList');
            cityList.innerHTML = '';
            
            if (currentCityLevel === 'province') {
                Object.keys(cityData).forEach(province => {
                    const item = document.createElement('div');
                    item.className = 'city-item';
                    item.textContent = province;
                    item.onclick = () => selectProvince(province);
                    cityList.appendChild(item);
                });
            } else if (currentCityLevel === 'city' && selectedProvince) {
                Object.keys(cityData[selectedProvince]).forEach(city => {
                    const item = document.createElement('div');
                    item.className = 'city-item';
                    item.textContent = city;
                    item.onclick = () => selectCity(city);
                    cityList.appendChild(item);
                });
            } else if (currentCityLevel === 'district' && selectedProvince && selectedCity) {
                cityData[selectedProvince][selectedCity].forEach(district => {
                    const item = document.createElement('div');
                    item.className = 'city-item';
                    item.textContent = district;
                    item.onclick = () => selectDistrict(district);
                    cityList.appendChild(item);
                });
            }
        }
        
        function selectProvince(province) {
            selectedProvince = province;
            selectedCity = '';
            selectedDistrict = '';
            switchCityLevel('city');
        }
        
        function selectCity(city) {
            selectedCity = city;
            selectedDistrict = '';
            switchCityLevel('district');
        }
        
        function selectDistrict(district) {
            selectedDistrict = district;
            applyCityFilter();
            hideCityModal();
        }
        
        function applyCityFilter() {
            const cityText = selectedDistrict ? 
                `${selectedProvince}${selectedCity}${selectedDistrict}` : 
                selectedCity ? 
                `${selectedProvince}${selectedCity}` : 
                selectedProvince;
            
            // 更新城市按钮文本和样式
            const cityBtn = document.querySelector('.city-filter-btn');
            cityBtn.innerHTML = `<i class="fas fa-map-marker-alt"></i> ${cityText}`;
            cityBtn.classList.add('filtered');
            
            // 更新全国按钮状态 - 取消激活
            document.querySelectorAll('.filter-item').forEach(item => {
                item.classList.remove('active');
            });
            
            console.log('按城市筛选:', cityText);
        }
        
        // 分类筛选相关函数
        function showCategoryModal() {
            document.getElementById('categoryModal').classList.add('show');
            loadCategoryList();
        }
        
        function hideCategoryModal() {
            document.getElementById('categoryModal').classList.remove('show');
        }
        
        function switchCategoryLevel(level) {
            currentCategoryLevel = level;
            
            // 更新级别按钮状态
            document.querySelectorAll('.category-level').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`[data-level="${level}"]`).classList.add('active');
            
            loadCategoryList();
        }
        
        function loadCategoryList() {
            const categoryList = document.getElementById('categoryList');
            categoryList.innerHTML = '';
            
            if (currentCategoryLevel === 'main') {
                Object.keys(categoryData).forEach(category => {
                    const item = document.createElement('div');
                    item.className = 'category-item';
                    item.textContent = category;
                    item.onclick = () => selectMainCategory(category);
                    categoryList.appendChild(item);
                });
            } else if (currentCategoryLevel === 'sub' && selectedMainCategory) {
                Object.keys(categoryData[selectedMainCategory]).forEach(subCategory => {
                    const item = document.createElement('div');
                    item.className = 'category-item';
                    item.textContent = subCategory;
                    item.onclick = () => selectSubCategory(subCategory);
                    categoryList.appendChild(item);
                });
            } else if (currentCategoryLevel === 'product' && selectedMainCategory && selectedSubCategory) {
                categoryData[selectedMainCategory][selectedSubCategory].forEach(product => {
                    const item = document.createElement('div');
                    item.className = 'category-item';
                    item.textContent = product;
                    item.onclick = () => selectProduct(product);
                    categoryList.appendChild(item);
                });
            }
        }
        
        function selectMainCategory(category) {
            selectedMainCategory = category;
            selectedSubCategory = '';
            selectedProduct = '';
            switchCategoryLevel('sub');
        }
        
        function selectSubCategory(subCategory) {
            selectedSubCategory = subCategory;
            selectedProduct = '';
            switchCategoryLevel('product');
        }
        
        function selectProduct(product) {
            selectedProduct = product;
        }
        
        function applyCategoryFilter() {
            // 更新分类按钮文本和样式
            const categoryBtn = document.querySelector('.category-filter-btn');
            let filterText = selectedMainCategory;
            if (selectedSubCategory) {
                filterText += selectedSubCategory;
            }
            if (selectedProduct) {
                filterText += selectedProduct;
            }
            
            categoryBtn.innerHTML = `<i class="fas fa-filter"></i> ${filterText}`;
            categoryBtn.classList.add('filtered');
            
            hideCategoryModal();
            console.log('按分类筛选:', selectedMainCategory, selectedSubCategory, selectedProduct);
        }
        
        // 点击弹窗外部关闭
        document.getElementById('cityModal').addEventListener('click', function(e) {
            if (e.target === this) {
                hideCityModal();
            }
        });
        
        document.getElementById('categoryModal').addEventListener('click', function(e) {
            if (e.target === this) {
                hideCategoryModal();
            }
        });
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 可以在这里加载公司数据
            console.log('公司介绍页面加载完成');
        });
    </script>
</body>
</html>


